<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">优惠券类型</label>
        <el-input v-model="query.couponType" clearable placeholder="优惠券类型" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <rrOperation :crud="crud"/>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="60%">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠券名称" prop="couponName">
                <el-input v-model="form.couponName" style="width: 240px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠券类型" prop="couponType">
                <el-select v-model="form.couponType" filterable placeholder="请选择" style="width: 240px;">
                  <el-option
                    v-for="item in dict.coupon_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="form.couponType == 2">
              <el-form-item label="请选择分类" prop="couponType">
                <el-select v-model="form.conditionsId" filterable clearable placeholder="仅该品类商品可享受优惠" style="width: 240px;">
                  <el-option
                    v-for="item in category_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="form.couponType == 3">
              <el-form-item label="请选择品牌" prop="couponType">
                <el-select v-model="form.conditionsId" clearable placeholder="仅限该品牌商品可享受优惠" style="width: 240px;">
                  <el-option
                    v-for="item in brand_list"
                    :key="item.id"
                    :label="item.brandName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="条件类型" prop="conditionType">
                <el-select v-model="form.conditionType" filterable placeholder="条件的类型" style="width: 240px;">
                  <el-option
                    v-for="item in dict.condition_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="满足条件" prop="conditions">
                <el-input v-model="form.conditions" style="width: 240px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠类型" prop="discountType">
                <el-select v-model="form.discountType" filterable placeholder="优惠的类型" style="width: 240px;">
                  <el-option
                    v-for="item in dict.discount_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.discountType == 0">
              <el-form-item label="优惠金额(减金额)" prop="discount">
                <el-input v-model="form.discount" style="width: 240px;"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else>
              <el-form-item label="优惠折扣(打折)" prop="discount">
                <el-input v-model="form.discount" style="width: 240px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发行量" prop="circulation">
                <el-input v-model="form.circulation" style="width: 240px;" placeholder="-1为发行量无限制"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每人限领">
                <el-input v-model="form.astrict" style="width: 240px;"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="时间类型">
                <el-select v-model="days_type_value" placeholder="请选择">
                  <el-option
                    v-for="item in days_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="days_type_value == 2">
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  style="width: 240px;"
                  placeholder="开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失效天数">
                <el-input v-model="form.expireDays" style="width: 240px;" placeholder="领取后失效的天数"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="days_type_value == 1">
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  style="width: 240px;"
                  placeholder="开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="截止时间">
                <el-date-picker
                  v-model="form.expireDate"
                  type="datetime"
                  style="width: 240px;"
                  placeholder="截止时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="获取方式">
                <el-select v-model="form.way" filterable placeholder="获取方式" style="width: 240px;">
                  <el-option
                    v-for="item in dict.coupon_way"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="form.way == 2">
              <el-form-item label="购物满多少">
                <el-input v-model="form.shoppingForEnough" style="width: 240px;" placeholder="给用户发放优惠券"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="form.remarks" style="width: 370px;"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="couponType" label="优惠券类型">
          <template slot-scope="scope">
            <el-tag type="success"> {{ dict.label.coupon_type[scope.row.couponType] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="couponName" label="优惠券名称"/>
        <el-table-column prop="discountType" label="优惠类型">
          <template slot-scope="scope">
            {{ dict.label.discount_type[scope.row.discountType] }}
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="优惠">
          <template slot-scope="scope">
            <div v-show="scope.row.discountType == 0">{{scope.row.discount}}元</div>
            <div v-show="scope.row.discountType == 1">{{scope.row.discount}}折</div>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expireDate" label="领取截止时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.expireDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expireDays" label="领取后失效天数"/>
        <el-table-column prop="conditions" label="享受优惠的条件">
          <template slot-scope="scope">
            <div v-show="scope.row.conditionType == 1">满{{scope.row.conditions}}件享受优惠</div>
            <div v-show="scope.row.conditionType == 0">满{{scope.row.conditions}}元享受优惠</div>
          </template>
        </el-table-column>
        <el-table-column prop="circulation" label="发行量"/>
        <el-table-column prop="astrict" label="每人限领数量"/>
        <el-table-column prop="allowance" label="已发行数量"/>
        <el-table-column prop="way" label="获取方式">
          <template slot-scope="scope">
            {{ dict.label.coupon_way[scope.row.way] }}
          </template>
        </el-table-column>

        <!--
                <el-table-column prop="expireDate" label="领取截止时间"/>
                        <el-table-column prop="remarks" label="备注"/>
                        <el-table-column prop="shoppingForEnough" label="购物满多少可得"/>

        <el-table-column prop="shoppingPrice" label="获取条件购买满多少钱"/>
        -->

        <el-table-column v-permission="['admin','ycCoupon:edit','ycCoupon:del']" label="操作" width="150px"
                         align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
  import crudYcCoupon from '@/api/market/coupon'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudYcCategory from '@/api/goods/goodsCategory'
  import crudYcBrand from '@/api/goods/goodsBrand'

  const defaultForm = {
    id: null,
    couponType: null,
    conditionsId: null,
    conditionType: null,
    conditions: null,
    discountType: null,
    discount: null,
    expireDate: null,
    expireDays: null,
    couponName: null,
    circulation: null,
    astrict: null,
    shoppingForEnough: null,
    way: null,
    startDate: null,
    shoppingPrice: null,
    allowance: null,
    remarks: null
  }
  export default {
    name: 'YcCoupon',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['coupon_type', 'condition_type', 'discount_type', 'coupon_way'],
    cruds() {
      return CRUD({ title: '优惠券', url: 'api/ycCoupon', sort: 'id,desc', crudMethod: { ...crudYcCoupon } })
    },
    data() {
      return {
        permission: {
          add: ['admin', 'ycCoupon:add'],
          edit: ['admin', 'ycCoupon:edit'],
          del: ['admin', 'ycCoupon:del']
        },
        rules: {
          couponType: [
            { required: true, message: '优惠券类型 关联字典表 COUPON_TYPE  1:全品类 2:限品类 3:限制品牌不能为空', trigger: 'blur' }
          ],
          conditionType: [
            { required: true, message: '条件的类型，0为金额，1为件数不能为空', trigger: 'blur' }
          ],
          conditions: [
            { required: true, message: '条件不能为空', trigger: 'blur' }
          ],
          discountType: [
            { required: true, message: '优惠的类型，0为金额，1为折扣不能为空', trigger: 'blur' }
          ],
          discount: [
            { required: true, message: '优惠不能为空', trigger: 'blur' }
          ],
          couponName: [
            { required: true, message: '优惠券名称不能为空', trigger: 'blur' }
          ],
          circulation: [
            { required: true, message: '发行量，-1为无限制不能为空', trigger: 'blur' }
          ],
          way: [
            { required: true, message: '获取方式1注册赠券 2 物赠券赠送 3主动领取不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'couponType', display_name: '优惠券类型 关联字典表 COUPON_TYPE  1:全品类 2:限品类 3:限制品牌' },
          { key: 'conditionsId', display_name: '条件ID coupon_type 为 2 3 时有值' },
          { key: 'conditionType', display_name: '条件的类型，0为金额，1为件数' },
          { key: 'discountType', display_name: '优惠的类型，0为金额，1为折扣' },
          { key: 'expireDate', display_name: '领取截止时间' },
          { key: 'expireDays', display_name: '领取后失效的天数' },
          { key: 'circulation', display_name: '发行量，-1为无限制' },
          { key: 'way', display_name: '获取方式1注册赠券 2 物赠券赠送 3主动领取' },
          { key: 'remarks', display_name: '备注' }
        ],
        //优惠券时间类型
        days_type: [{
          value: '1',
          label: '截至时间'
        }, {
          value: '2',
          label: '过期天数'
        }],
        days_type_value: 1,
        //分类列表
        category_list: [],
        category_id: '',
        //品牌列表
        brand_list: [],
        brand_id: ''
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        this.getCategory()
        this.getBrand()
        return true
      },
      //分类
      getCategory() {
        crudYcCategory.getUpIdIsNotNullList().then(res => {
          this.category_list = res
          console.log('getUpIdIsNotNullList')
          console.log(res)
        })
      },
      getBrand() {
        crudYcBrand.getBrandList().then(res => {
          this.brand_list = res.content
          console.log('getGoodsBrand')
          console.log(res)
        })
      }
    }
  }
</script>

<style scoped>

</style>
